<!-- created:2022/12/11 13:43 By AdinZ -->
<template>
    <div class="TablePage">
        <TableLayout :height-offset="heightOffset">
            <template #query>
                <el-form :inline="true" size="small">
                    <el-form-item v-for="(item,index) in query" :key="index">
                        <div style="display: none" v-if="verifyFunction(item.options)">
                            {{ item.array = item.options() }}
                        </div>
                        <div style="display: none" v-else> {{ item.array = item.options }}</div>

                        <template #label>{{ item.label }}</template>
                        <el-input v-if="item.type=='text'" :type="item.type" v-model="item.value" :style="item.styles"
                                  :placeholder="item.placeholder"/>
                        <el-select v-if="item.type=='select'" v-model="item.value"
                                   :placeholder="item.placeholder" :style="item.styles">
                            <template #default>
                                <el-option label="全部" value=""/>
                                <el-option v-for="(select,selectIndex) in (item.array)"
                                           :key="selectIndex" :label="select.label"
                                           :value="select.value"/>
                            </template>
                        </el-select>
                        <el-date-picker v-if="item.type=='date-picker'" v-model="item.value"
                                        :placeholder="item.placeholder" :style="item.styles" value-format="x"
                                        type="datetimerange" range-separator="至" start-placeholder="开始时间"
                                        end-placeholder="结束时间"/>

                    </el-form-item>
                    <el-form-item>
                        <el-button icon="Search" circle @click="handlerSearch"/>
                    </el-form-item>
                    <el-form-item v-for="(item,index) in query.filter(e=>e.type=='buttons')" :key="index"
                                  :label="item.label">
                        <el-button v-for="button in item.buttons" :key="button.label" :icon="button.icon"
                                   :circle="button.circle"
                                   @click="button.callback" :type="button.type"
                                   :style="button.styles">
                            <template #default v-if="button.label">{{ button.label }}</template>
                        </el-button>
                    </el-form-item>
                    <el-form-item v-if="addbtn">
                        <el-button type="primary" icon="Plus" circle @click="handlerAddBtn"/>
                    </el-form-item>
                    <el-form-item>
                        <slot name="buttons"/>
                    </el-form-item>
                </el-form>
            </template>
            <template #default="scope">
                <el-table :data="tableList" stripe border style="width: 100%" :height="scope.height" size="small">


                    <el-table-column v-for="(item,index) in columns" :key="index" :label="item.label"
                                     :width="item.width" align="center" :fixed="item.fixed===true?'right':false">
                        <template #default="scope">
                            <div v-if="item.type==='render' && item.render" >
                                <Render  :node="item.render(scope.row, scope)"/>
                            </div>
                            <div v-else-if="item.type==='date'">
                                {{ $filter.parseTime(scope.row[item.prop]) }}
                            </div>
                            <el-button-group v-else-if="item.type==='buttons'">
                                <template v-for="(button,bIndex) in item.buttons" :key="bIndex">
                                    <el-button :type="button.type"
                                               :style="button.styles" @click="button.callback(scope.row,scope)"
                                               size="small"
                                               v-if="!verifyButton(scope.row,button)">
                                        <el-icon v-if="button.icon">
                                            <component :is="button.icon"/>
                                        </el-icon>
                                        {{ button.label }}
                                    </el-button>
                                </template>
                            </el-button-group>
                            <div v-else-if="item.type==='index' || item.prop==='$index' "> {{ scope.$index + 1 }}</div>
                            <div v-else-if="item.type==='components'">
                                    <component v-bind:is="item.render(scope.row, scope)" />
                            </div>
                            <span v-else> {{ scope.row[item.prop] }}</span>

                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <template #page>
                <el-pagination style="justify-content: center;" :current-page="tablePage" :page-size="size"
                               @current-change="pageChange"
                               @size-change="sizeChange" background
                               layout="sizes,prev, pager, next" small
                               :total="tableTotal"/>
            </template>
        </TableLayout>


    </div>
</template>

<script>
import TableLayout from "@/layout/TableLayout";
import Render from "./Render";
export default {
    name: "TablePage",
    components: {TableLayout,Render},

    props: {
        query: {
            type: Array,
            default: () => []
        },
        columns: {
            type: Array,
            default: () => []
        },
        data: {
            type: Object,
            default: () => {
                return {total: 1000, list: [], page: 1, size: 30}
            }
        },
        addbtn: {
            type: Boolean,
            default: () => false
        },
        heightOffset: {
            type: Number,
            default: () => {
                return 0
            }
        }
    },
    data() {
        return {
            page: this.data.page,
            size: this.data.size,
        }
    },
    watch: {
        data() {
            console.log('数据变动', JSON.stringify(this.data))
        }
    },

    computed: {
        tableData() {
            return this.data;
        },
        tableList() {
            return this.tableData.list;
        },
        tableTotal() {
            console.log('变动数据', this.tableData)
            return this.tableData.total
        },
        tablePage() {
            return this.tableData.page;
        },
    },

    created() {
        this.pageChange(this.data.page, this.data.size)
    },
    methods: {
        pageChange(page, size) {
            size = size || this.tableData.size
            let data = {page, size};
            this.query.forEach(e => {
                if (e.key)
                    data[e.key] = e.value;
            })
            this.$emit('onLoad', data)
        },
        sizeChange(size) {
            this.pageChange(this.tablePage, size)
        },
        handlerSearch() {
            this.sizeChange(this.tableData.size)
        },
        handlerAddBtn() {
            this.$emit('onAdd')
        },
        verifyFunction(fc) {
            if (!fc) return false;
            return fc instanceof Function
        },
        verifyButton(data, button) {
            if (this.verifyFunction(button.hidden)) {
                return button.hidden(data)
            }
            return button.hidden
        }
    }
}
</script>

<style scoped lang="scss">
.TablePage {
}
</style>
